<template>
<div>
  <div class="task-container">
    <el-card class="task" :body-style="{ padding: '0px',width:'100%' }" v-for="(item,index) in tasks" :key="index">
      <img src="../../../assets/img/task.png"  class="image">
      <div style="padding: 14px;">
        <span class="task-title">{{ item.title }}</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate.toLocaleString() }}</time>
          <el-button type="text" class="button" @click="gotoDetail(item.id)">查看任务</el-button>
        </div>
      </div>
    </el-card>
  </div>
  <div class="float-menu" v-show="showFloatMenu" @click="showFloatMenu=false">
    <div class="float-menu-btn" @click="createTask">创建任务</div>
    <div class="float-menu-btn">发布任务</div>
  </div>
  <div class="float-button" @click="showFloatMenu=!showFloatMenu">
    <span>+</span>
  </div>
</div>
</template>

<script>
import {createTask, getTasks} from "@/api";

export default {
  name: "message",
  data() {
    return {
      currentDate: new Date(),
      page:{
        index:0,
        size:6
      },
      tasks:[],
      showFloatMenu:false
    };
  },
  mounted() {
    this.loadTasks()
  },
  methods:{
    loadTasks(){
      getTasks(this.page.index,this.page.size).then(res => {
        if(res.data.code==200){
          this.tasks = res.data.data.records;
        }
      })
    },
    gotoDetail(id){
      this.$router.push({
        name:'任务详情',
        params:{
          id:id
        }
      })
    },
    createTask(){
      createTask({
        title:'未命名'
      }).then(res=>{
        this.gotoDetail(res.data.data.id)
      })
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.button {
  padding: 0;
  float: right;
}

.task-title{
  font-size: 18px;
  font-weight: 700;
}

.image {
  width: 100%;
  display: block;
  height: 200px;
  overflow-y: hidden;
  object-fit: cover;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.task-container {
  display: flex;
  flex-wrap: wrap;
}



.task{
  margin: 1.4%;
  width: 22%;
}

.float-button{
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #42b983;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.3) 0px 2px 15px 2px;
  transition: all .3s;
}
.float-menu{
  position: fixed;
  right: 40px;
  bottom: 130px;

}

.float-menu .float-menu-btn{
  background: #333333;
  width: 100px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;

}

@media (max-width: 1100px) {
  .task{
    margin: 1.5%;
    width: 30%;
  }
}

@media (max-width: 820px) {
  .task{
    margin: 2%;
    width: 45%;
  }

}
.float-menu-btn:hover{
  background: rgba(51, 51, 51, 0.5);
}
.float-button:hover{
  background: #328c68;
}
</style>
